Float, clear, e altro.

Float e clear.

Con float un elemento è sottratto al normale flusso del documento, ed è allineato a sinistra se è float:left,oppure a destra, se è float: right, ed il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float.

Ho dichiarato static il div box-1 proprio per rimarcare il comportamento normale di un elemento block-level, mentre i div box-2 e box-3 sono posizionali con float:left. Si osservi, poi, come il testo di questo paragrafo è fluttuato attorno ai due div box-2 e box-3, ma non attorno a box-1.
Se poi non chiudessi con il div box-4 con la proprietà clear:left, avrei lo sconfinamento (trasbordo, o "stich out") dei div relativi al box-2 ed al box-3 oltre il loro contenitore.

Posso posizionare un div box-5 a destra, e farlo seguire da un box-6 che cancelli il float per evitarne lo sconfinamento dal suo contenitore.

E, naturalmente, posso posizionare ancora due div, uno a sinistra e l'altro a destra, ed evitarne lo sconfinamento dal contenitore tramite un altro div con proprietà clear:both.

Questo testo va posizionato dopo , e non prima, del box-8, se vogliamo che fluttui attorno ad esso.

Si ha lo sconfinamento dal proprio div anche per le immagini.
Di seguito riporto l'icona di una freccia blu che effettua il link ad Home. Questa icona è contenuta nel div identificato come box-10. Ebbene, se non avessi messo subito dopo questo testo, e prima della chiusura del div, la seguente regola CSS on line: style="clear:left", avrei avuto lo sconfinamento dell'immagine.
Così pure, se non avessi di nuovo inserito il div box-4 con un perentorio "clear: left", avrei avuto lo sconfinamento del div box-10 dal suo contenitore.

Ciao, sono il box-10.

Se un neofita, poco esperto di pagine web, vuole accedere al codice HTML ed alle regole CSS relative a questo documento, può, a sua scelta, o fare clic destro su un punto qualsiasi di questa pagina, e poi ancora clic sinistro sulla voce HTML, oppure cliccare quì.